<template>
    <div
        class="uploadFileBoxComponents"
        :style="{
            width: width,
            height: height,
        }"
        :key="imageUrl"
    >
        <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :style="{
                border: border ? `1px ${borderStyle} ${borderColor}` : '0',
                background: bgColor,
                borderRadius: `${borderRadius}px`,
            }"
            :http-request="uploadFiles"
        >
            <!-- <images v-if="imageUrl" :src="imageUrl" :imgType="imgType" :key="imageUrl" class="avatar"></images> -->
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <div v-if="!imageUrl && showIconOrText" class="uploadclick">
                <el-icon :size="iconSize" :color="color" v-if="showIcon">
                    <component :is="icon"></component>
                </el-icon>
                <p :style="{ color: color, fontSize: `${textSize}px` }" v-if="showText">{{ text }}</p>
            </div>
        </el-upload>
    </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { ossInfo, uploadingMinIo, attachFile, uploadingFile } from "@/api/public";
// import { uploadFile } from "@/api/auth";
interface Props {
    fileUrl?: string; // 默认值
    width?: string;
    height?: string;
    border?: boolean;
    borderStyle?: string;
    borderColor?: string;
    borderRadius?: string;
    text?: string;
    textSize?: string;
    icon?: string;
    iconSize?: string;
    bgColor?: string;
    color?: string;
    bottom?: string;
    isTable?: boolean;
    tableItem?: number | string;
    top?: string;
    showIcon?: boolean;
    showIconOrText?: boolean;
    showText?: boolean;
    fileLayout?: any;
    maxFileSize?: number;
    imgType?: string;
}
const props = withDefaults(defineProps<Props>(), {
    fileUrl: "",
    width: "100%",
    height: "100%",
    border: true,
    borderStyle: "dotted",
    borderColor: "#DCDFE6",
    borderRadius: "5",
    text: "上传文件",
    textSize: "12",
    icon: "Plus",
    iconSize: "44",
    bgColor: "",
    color: "#666666",
    bottom: "20",
    isTable: false,
    tableItem: "",
    top: "0",
    showIcon: true,
    showIconOrText: true,
    showText: true,
    fileLayout: ["jpg", "jpeg", "bmp", "png"],
    maxFileSize: 10,
    imgType: "1",
});
// const baseUrl = process.env.VUE_APP_BASE_FILE;
const imageUrl: any = ref("");
setTimeout(() => {
    imageUrl.value = `${process.env.VUE_APP_BASE_FILE}${props.fileUrl}`;
    console.log(imageUrl.value);
}, 300);
// console.log(imageUrl);
// const fileLayouts = ref(props.fileLayout);
const emit = defineEmits(["callBack"]);
const uploadFiles = (f: any) => {
    const file = f.file;
    if (file.size > 1024 * 1024 * props.maxFileSize) {
        ElMessage.success(`文件不能超过${props.maxFileSize}MB`);
        return;
    } else if (!props.fileLayout.includes(file.name.split(".")[1])) {
        ElMessage.success(`请上传文件格式为${props.fileLayout.join("/")}的文件`);
        return;
    }
    const formData = new FormData();
    formData.append("file", file);
    // /sxnf-cloud/2024/02/05/b9152683d6094ebd969649467e76e6a3
    // console.log(process.env.VUE_APP_BASE_FILE);
    // return;
    uploadingFile(formData).then((res) => {
        // console.log(res);
        imageUrl.value = `${process.env.VUE_APP_BASE_FILE}${res.data.showFileUrl}`;
        // console.log(imageUrl.value);
        emit("callBack", res.data.showFileUrl, props.tableItem);
    });
};
</script>
<style lang="scss" scoped>
.uploadFileBoxComponents {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .avatar-uploader {
        width: 100%;
        overflow: hidden;
        height: 100%;
        .avatar {
            width: 100%;
            height: 100%;
        }
    }

    .uploadclick {
        width: 100%;
        // height: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        p {
            width: 100%;
        }
    }
}
</style>
<style>
.uploadFileBoxComponents .el-upload {
    width: 100%;
    height: 100%;
}
</style>
